<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isUser">
        <label for="userName">用户账号</label>
        <input type="text" id="userName" placeholder="用户账号" key="email">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="userName">
    </span>
    <button @click="isUser = !isUser">切换类型</button>

    <h2 v-show="isUser">{{message}}</h2>

    <h2>{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement(123,$event)">-</button>

    <!-- .stop修饰的阻止冒泡事件。event.stopPropagation() -->
    <div @click="divClick">
        aaaaa
        <button @click.stop="btnClick">按钮</button>
    </div>

    <!-- .prevent禁止form中action的自动提交。enent.preventDefault() -->

    <!-- .{keyCode | keyAlias},监听键盘的键的点击 -->
    <input type="text" @keyup.enter="keyup" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'Hello v-show',
            isUser:true,
            counter:0
        },
        methods : {
            divClick:function(){
                console.log("divClick")
            },
            btnClick:function(){
                console.log("btnClick")
            },
            increment:function () {
                this.counter++
            },
            decrement:function (abs,event) {
                console.log(abs)
                console.log(event)
                if (this.counter > 0){
                    this.counter--
                }
            },
            keyup:function () {
                console.log("keyup")
            }
        }
    });
</script>
</body>
</html>